<template>
  <div class="information">
    <p class="name" v-if="arr.length != 0">{{newdata.name}}</p>
    <p class="name" v-else @click="tologin()">点击登录</p>

    <div v-if="arr.length != 0">
      <p class="uid">通行证ID：{{newdata.uid}}</p>
      <div class="Lv">
        <span>{{newdata.Lv1}}</span>
        <span>{{newdata.Lv2}}</span>
        <span>{{newdata.Lv3}}</span>
        <span>{{newdata.Lv4}}</span>
        <span>{{newdata.Lv5}}</span>
      </div>
      <div class="hudong">
        <div class="fensi"><span>{{newdata.fensi}}</span>粉丝</div>
        <div class="guanzhu"><span>{{newdata.guanzhu}}</span>关注</div>
        <div class="zan"><span>{{newdata.zan}}</span>获赞</div>
      </div>
    </div>
    <div class="tishi" v-else @click="tologin()">
      登录解锁更多精彩内容
    </div>
  </div>
</template>

<script>
export default {
  props:["arr"],
  methods: {
    tologin(){
      this.$router.push('/login')
    }
  },
  created(){
    this.$store.dispatch('getinformation',{url:"/data/wode/information"})
  },
  computed:{
    newdata(){
      return this.$store.state.information.data;
    }
  },
}
</script>

<style scoped>
.information {
  min-height: 1.26rem;
  /* background-color: yellow; */
  margin-bottom: 0.05rem;
}
.information .name {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.24rem;
  font-weight: 700;
}
.information .uid {
  height: 0.26rem;
  line-height: 0.26rem;
  font-size: 0.16rem;
}
.information .Lv {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  height: 0.54rem;
  align-items: center;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.information .Lv span {
  flex-shrink: 0;
  color: rgb(155, 155, 155);
  border: 1px solid rgb(155, 155, 155);
  border-radius: 0.05rem;
  padding: 0.05rem;
  margin: 0 0.05rem;
}
.information .hudong {
  display: flex;
  justify-content: flex-start;
  height: 0.57rem;
  align-items: center;
}
.information .hudong div {
  margin-right: 0.25rem;
  font-size: 0.14rem;
  color: rgb(155, 155, 155);
}
.information .hudong div span {
  font-size: 0.2rem;
  color: black;
  margin-right: 0.05rem;
}
.information .tishi{
  padding-top: .1rem;
}
</style>